<template>
  <svg v-if="inline" v-html="module.node.innerHTML" class="vc-svg-icon" viewBox="64 64 896 896">
  </svg>
  <svg v-else class="vc-svg-icon" aria-hidden="true" :icon-href="href">
    <use :xlink:href="href"></use>
  </svg>
</template>

<script>
  /**
   * svg sprites 图标
   * props
   * -- src svg文件路径，已在vue.config.js中进行配置，会自动转换成一个模块依赖。注意：引入的模块或者svg文件路径必须以“.icon.svg”结尾
   * -- inline
   */
  export default {
    name: 'VcSvgIcon',
    props: {
      src: module,
      inline: Boolean
    },
    computed: {
      module() {
        return this.src.default || this.src
      },
      href() {
        return '#'+this.module.id
      }
    },
    mounted() {
      const container = document.querySelector('#__SVG_SPRITE_NODE__')
      if (!container.querySelector(this.href)) {
        container.insertAdjacentHTML('beforeend', this.module.content)
      }
    },
    unmounted() {
      const hasIcon = document.querySelector(`[icon-href="${this.href}"]`)
      const symbol = document.querySelector('#__SVG_SPRITE_NODE__').querySelector(this.href)
      if (!hasIcon && symbol) {
        symbol.remove()
      }
    }
  }
</script>

<style lang="scss">
  .vc-svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
  }
</style>